<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8">
    <title>留言列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <script type="text/javascript" src="./js/cookie.js"></script>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">刷新</i></a>
    </div>
    <div class="x-body">
      
      <xblock>
        <span class="x-right" style="line-height:40px" id="totil1"></span>
      </xblock>
      <table class="layui-table x-admin">
        <thead>
          <tr>
            <th>ID</th>
            <th>称呼</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>性别</th>
            <th>信息</th>
            <th>时间</th>
            <th>操作</th></tr>
        </thead>
        <tbody id="td">
          
        </tbody>
      </table>
      <div class="page">
        
      </div>

    </div>
    <script src="js/main.js"></script>
    <script>
    
	    $(function(){
	  	  get_user_info(1);
	    });
	    
	    function get_user_info(pn){
	  	  $.ajax({
	  		  url:'/lvyou/SelliuyanServlet',
	  		  type:'post',
	  		  data:'pn='+pn,
	  		  success:function(data){
	  			  console.log(JSON.parse(data));
	  			  show_user_info(JSON.parse(data).extend.list)
	  		  }
	  	  });
	    }
	    
	      //信息展示 
	      function show_user_info(list){
	    	  //清空之前的数据
	    	  $('#td').empty();
	    	  //数据信息展示 
	    	  $.each(list.list,function(i,item){
	    		  var tr = $('<tr></tr>');
	    		  var td_id = $('<td></td>').append(item.id);
	        	  var td_chenghu = $('<td></td>').append(item.chenghu);
	        	  var td_username = $('<td></td>').append(item.username);
	        	  var td_phone = $('<td></td>').append(item.phone);
	        	  var td_sex = $('<td></td>').append(item.sex);
	        	  var td_xinxi = $('<td></td>').append(item.xinxi);
	        	  var td_time = $('<td></td>').append(item.time);
		    	  var span5 = $("<a title='删除留言'   style='display:inline-block;padding:2px 8px;background:#00CED1;color:#fff;font-size:12px;border-radius:3px;'>删除留言</a>");
		    	  span5.click(function(){
		    		  del_user(item.id);
		    	  });
		    	  var spanTd = $("<td></td>");
		    	  spanTd.append(span5); 
		    	  tr.append(td_id)
		    	  .append(td_chenghu)
		    	  .append(td_username)
		    	  .append(td_phone)
		    	  .append(td_sex)
		    	  .append(td_xinxi)
		    	  .append(td_time)
		    	  .append(spanTd);
	        	  $('#td').append(tr);
	    	  });
	    	 
	    	  $('#totil1').empty();
	    	  $('#totil1').append('总用户：'+list.total+"位");
	    	  //分页操作
	    	  $('.page').empty();
	    	  var div = $('<div></div>');
	    	  //判断是否是首页
	    	  var shouyea;
	    	  var shangyiye;
	    	  if(list.pageNum==1){
	    		  shouyea = $('<a class="num">首页</a>');
	        	  shangyiye = $('<a class="prev">&lt;&lt;</a>');
	    	  }else{
	    		  shouyea = $('<a class="num" href="">首页</a>');
	        	  shangyiye = $('<a class="prev" href="">&lt;&lt;</a>');
	    		  shouyea.click(function(){
	    			  get_user_info(1);
	        		  return false;
	        	  });
	    		  shangyiye.click(function(){
	    			  get_user_info(list.pageNum-1);
	    			  return false;
	        	  });
	    	  }
	    	  div.append(shouyea).append(shangyiye);
	    	  $.each(list.navigatepageNums,function(i,item){
	    		  var a;
	    		  if(item == list.pageNum){
	    			  a = $('<span class="current"></span>').append(item);
	    		  }else{
	    			  a = $(' <a class="num" href=""></a>').append(item);
	    			  a.click(function(){
	    				  get_user_info(item);
	    				  return false;
	    			  });
	    		  }
	    		  div.append(a);
	    	  });
	    	  //判断是否还有 下一页 
	    	  var xiayiye;
	    	  var moye;
	    	  if(list.hasNextPage){
	    		  xiayiye = $(' <a class="next" href="">&gt;&gt;</a>');
	        	  moye = $('<a class="num" href="">末页</a>');
	    		  xiayiye.click(function(){
	    			  get_user_info(list.pageNum+1);
	    			  return false;
	        	  });
	        	  moye.click(function(){
	        		  get_user_info(list.pages);
	        		  return false;
	        	  });
	    	  }else{
	    		  xiayiye = $(' <a class="next">&gt;&gt;</a>');
	        	  moye = $('<a class="num">末页</a>');
	    	  }
	    	  div.append(xiayiye).append(moye); 
	    	  $('.page').append(div);
	      }
    
	      //删除
	      function del_user(id){
		  	  $.ajax({
		  		  url:'/lvyou/DelliuyanServlet',
		  		  type:'post',
		  		  data:'id='+id,
		  		  success:function(data){
		  			  console.log(JSON.parse(data));
		  			  if(JSON.parse(data).code==100){
		  				showMessage('删除成功','success',1000)
		  				location.reload();
		  			  }else{
		  				showMessage('删除失败','error',1000)
		  			  }
		  		  }
		  	  });
		    }
    </script>
  </body>
</html>